﻿/**
 * Скрипт обрабатывающий отображение множественной загрузки изображений на сервер, использует HTML5 File API
 * @param uploadCtrl - собственно сам файл аплоудер
 * @param displayContainer - контейнер отображения.
 */
function MultipleImagesUploader(uploadCtrl,displayContainer){

    // Запоминаем переменные
    this.uploadCtrl = uploadCtrl;
    this.container = displayContainer;
    var self = this;

    // Биндим события
    // Выбор в файл аплоуде
    $(this.uploadCtrl).change(function(){
        self.displayFiles(this.files);
    });

    /**
     * Функция рендерит коллекцию файлов которая будет отправлена на сервер
     * @param files
     */
    this.displayFiles = function(files){
        self.container.empty();
        $.each(files,function(i,file){
            // Отсеиваем только картинки
            if (!file.type.match(/image.*/)) {
                return true;
            }

            // Создаем компоненты
            var li = $("<li/>").appendTo(self.container);
            var img = $("<img/>").addClass("preview").appendTo(li);
            var title = $("<div/>").text(file.name).appendTo(li);

            // Запоминаем файл
            li.get(0).file = file;

            // Читаем файл используя HTML5 File API
            var reader = new FileReader();
            reader.onload = (function(aImg){
                return function(e){
                    aImg.attr("src",e.target.result);
                    aImg.attr("width",100);
                }
            })(img);
            reader.readAsDataURL(file);
        });
    }
}